[[...path]].page.tsx 8.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236
  1. import React, { type ReactNode, useMemo } from 'react';
  2. import {
  3. GetServerSideProps, GetServerSidePropsContext,
  4. } from 'next';
  5. import { useTranslation } from 'next-i18next';
  6. import { serverSideTranslations } from 'next-i18next/serverSideTranslations';
  7. import dynamic from 'next/dynamic';
  8. import Head from 'next/head';
  9. import { useRouter } from 'next/router';
  10. import { BasicLayout } from '~/components/Layout/BasicLayout';
  11. import { CrowiRequest } from '~/interfaces/crowi-request';
  12. import type { RendererConfig } from '~/interfaces/services/renderer';
  13. import {
  14. useCurrentUser, useIsSearchPage, useGrowiCloudUri,
  15. useIsSearchServiceConfigured, useIsSearchServiceReachable,
  16. useCsrfToken, useIsSearchScopeChildrenAsDefault,
  17. useRegistrationWhitelist, useShowPageLimitationXL, useRendererConfig, useIsEnabledMarp,
  18. } from '~/stores/context';
  19. import loggerFactory from '~/utils/logger';
  20. import { NextPageWithLayout } from '../_app.page';
  21. import type { CommonProps } from '../utils/commons';
  22. import {
  23. getNextI18NextConfig, getServerSideCommonProps, generateCustomTitle, useInitSidebarConfig,
  24. } from '../utils/commons';
  25. const logger = loggerFactory('growi:pages:me');
  26. type Props = CommonProps & {
  27. isSearchServiceConfigured: boolean,
  28. isSearchServiceReachable: boolean,
  29. isSearchScopeChildrenAsDefault: boolean,
  30. isEnabledMarp: boolean,
  31. rendererConfig: RendererConfig,
  32. showPageLimitationXL: number,
  33. // config
  34. registrationWhitelist: string[],
  35. };
  36. const PersonalSettings = dynamic(() => import('~/components/Me/PersonalSettings'), { ssr: false });
  37. // const MyDraftList = dynamic(() => import('~/components/MyDraftList/MyDraftList'), { ssr: false });
  38. const InAppNotificationPage = dynamic(
  39. () => import('~/components/InAppNotification/InAppNotificationPage').then(mod => mod.InAppNotificationPage), { ssr: false },
  40. );
  41. const MePage: NextPageWithLayout<Props> = (props: Props) => {
  42. const router = useRouter();
  43. const { t } = useTranslation(['translation', 'commons']);
  44. const { path } = router.query;
  45. const pagePathKeys: string[] = Array.isArray(path) ? path : ['personal-settings'];
  46. const mePagesMap = useMemo(() => {
  47. return {
  48. 'personal-settings': {
  49. title: t('User Settings'),
  50. component: <PersonalSettings />,
  51. },
  52. // drafts: {
  53. // title: t('My Drafts'),
  54. // component: <MyDraftList />,
  55. // },
  56. 'all-in-app-notifications': {
  57. title: t('commons:in_app_notification.notification_list'),
  58. component: <InAppNotificationPage />,
  59. },
  60. };
  61. }, [t]);
  62. const getTargetPageToRender = (pagesMap, keys): {title: string, component: JSX.Element} => {
  63. return keys.reduce((pagesMap, key) => {
  64. const page = pagesMap[key];
  65. if (page == null) {
  66. return {
  67. title: 'NotFoundPage',
  68. component: <h2>{t('commons:not_found_page.page_not_exist')}</h2>,
  69. };
  70. }
  71. return pagesMap[key];
  72. }, pagesMap);
  73. };
  74. const targetPage = getTargetPageToRender(mePagesMap, pagePathKeys);
  75. useIsSearchPage(false);
  76. useCurrentUser(props.currentUser ?? null);
  77. useRegistrationWhitelist(props.registrationWhitelist);
  78. useShowPageLimitationXL(props.showPageLimitationXL);
  79. // commons
  80. useCsrfToken(props.csrfToken);
  81. useGrowiCloudUri(props.growiCloudUri);
  82. // init sidebar config with UserUISettings and sidebarConfig
  83. useInitSidebarConfig(props.sidebarConfig, props.userUISettings);
  84. // page
  85. useIsSearchServiceConfigured(props.isSearchServiceConfigured);
  86. useIsSearchServiceReachable(props.isSearchServiceReachable);
  87. useIsSearchScopeChildrenAsDefault(props.isSearchScopeChildrenAsDefault);
  88. useRendererConfig(props.rendererConfig);
  89. useIsEnabledMarp(props.rendererConfig.isEnabledMarp);
  90. const title = generateCustomTitle(props, targetPage.title);
  91. return (
  92. <>
  93. <Head>
  94. <title>{title}</title>
  95. </Head>
  96. <div className="dynamic-layout-root">
  97. <header className="py-3">
  98. <div className="container-fluid">
  99. <h1 className="title">{ targetPage.title }</h1>
  100. </div>
  101. </header>
  102. <div id="grw-fav-sticky-trigger" className="sticky-top"></div>
  103. <div id="main" className="main">
  104. <div id="content-main" className="content-main container-lg">
  105. {targetPage.component}
  106. </div>
  107. </div>
  108. </div>
  109. </>
  110. );
  111. };
  112. type LayoutProps = Props & {
  113. children?: ReactNode
  114. }
  115. const Layout = ({ children, ...props }: LayoutProps): JSX.Element => {
  116. // init sidebar config with UserUISettings and sidebarConfig
  117. useInitSidebarConfig(props.sidebarConfig, props.userUISettings);
  118. return (
  119. <BasicLayout>
  120. {children}
  121. </BasicLayout>
  122. );
  123. };
  124. MePage.getLayout = function getLayout(page) {
  125. return <Layout {...page.props}>{page}</Layout>;
  126. };
  127. async function injectServerConfigurations(context: GetServerSidePropsContext, props: Props): Promise<void> {
  128. const req: CrowiRequest = context.req as CrowiRequest;
  129. const { crowi } = req;
  130. const {
  131. searchService,
  132. configManager,
  133. } = crowi;
  134. props.isSearchServiceConfigured = searchService.isConfigured;
  135. props.isSearchServiceReachable = searchService.isReachable;
  136. props.isSearchScopeChildrenAsDefault = configManager.getConfig('crowi', 'customize:isSearchScopeChildrenAsDefault');
  137. props.registrationWhitelist = configManager.getConfig('crowi', 'security:registrationWhitelist');
  138. props.showPageLimitationXL = crowi.configManager.getConfig('crowi', 'customize:showPageLimitationXL');
  139. props.sidebarConfig = {
  140. isSidebarCollapsedMode: configManager.getConfig('crowi', 'customize:isSidebarCollapsedMode'),
  141. };
  142. props.rendererConfig = {
  143. isEnabledLinebreaks: configManager.getConfig('markdown', 'markdown:isEnabledLinebreaks'),
  144. isEnabledLinebreaksInComments: configManager.getConfig('markdown', 'markdown:isEnabledLinebreaksInComments'),
  145. isEnabledMarp: configManager.getConfig('crowi', 'customize:isEnabledMarp'),
  146. adminPreferredIndentSize: configManager.getConfig('markdown', 'markdown:adminPreferredIndentSize'),
  147. isIndentSizeForced: configManager.getConfig('markdown', 'markdown:isIndentSizeForced'),
  148. drawioUri: configManager.getConfig('crowi', 'app:drawioUri'),
  149. plantumlUri: configManager.getConfig('crowi', 'app:plantumlUri'),
  150. // XSS Options
  151. isEnabledXssPrevention: configManager.getConfig('markdown', 'markdown:rehypeSanitize:isEnabledPrevention'),
  152. xssOption: configManager.getConfig('markdown', 'markdown:rehypeSanitize:option'),
  153. attrWhitelist: JSON.parse(crowi.configManager.getConfig('markdown', 'markdown:rehypeSanitize:attributes')),
  154. tagWhitelist: crowi.configManager.getConfig('markdown', 'markdown:rehypeSanitize:tagNames'),
  155. highlightJsStyleBorder: crowi.configManager.getConfig('crowi', 'customize:highlightJsStyleBorder'),
  156. };
  157. }
  158. // /**
  159. // * for Server Side Translations
  160. // * @param context
  161. // * @param props
  162. // * @param namespacesRequired
  163. // */
  164. async function injectNextI18NextConfigurations(context: GetServerSidePropsContext, props: Props, namespacesRequired?: string[] | undefined): Promise<void> {
  165. // preload all languages because of language lists in user setting
  166. const nextI18NextConfig = await getNextI18NextConfig(serverSideTranslations, context, namespacesRequired, true);
  167. props._nextI18Next = nextI18NextConfig._nextI18Next;
  168. }
  169. export const getServerSideProps: GetServerSideProps = async(context: GetServerSidePropsContext) => {
  170. const req = context.req as CrowiRequest;
  171. const { user, crowi } = req;
  172. const result = await getServerSideCommonProps(context);
  173. // check for presence
  174. // see: https://github.com/vercel/next.js/issues/19271#issuecomment-730006862
  175. if (!('props' in result)) {
  176. throw new Error('invalid getSSP result');
  177. }
  178. const props: Props = result.props as Props;
  179. if (user != null) {
  180. const User = crowi.model('User');
  181. const userData = await User.findById(user.id).populate({ path: 'imageAttachment', select: 'filePathProxied' });
  182. props.currentUser = userData.toObject();
  183. }
  184. await injectServerConfigurations(context, props);
  185. await injectNextI18NextConfigurations(context, props, ['translation', 'admin', 'commons']);
  186. return {
  187. props,
  188. };
  189. };
  190. export default MePage;